<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Faça login para se registrar</title>
    <link href="js/lib.dom.d.ts"/>
    <link rel="stylesheet" href="./css/swal.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
            /*background-image: url('your_background_image.jpg'); !* 替换为你的背景图片路径 *!*/
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        button{
            margin-top: 10px;
            margin-right: 5px;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.8); /* 设置半透明白色背景 */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            position: fixed;
            top: 25%; /* 或其他你想要的固定位置 */
        }

        h2 {
            color: #c71585; /* Deep pink 颜色 */
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            font-size: 18px;
            display: block;
            margin-bottom: 8px;
            color: #333;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .form-group button {
            background-color: #c71585;
            color: #fff;
            padding: 12px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .form-switch {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .form-switch label {
            margin-right: 10px;
            font-size: 16px;
            color: #333;
            cursor: pointer; /* 为了提供一致的交互性 */
        }

        .form-switch input {
            display: none; /* 隐藏原始的复选框 */
        }
    </style>
</head>
<body>
<div class="container">
    <h2>Faça login para se registrar</h2>
    <form id="loginForm" class="form-group">
        <label for="username" style="margin-top: 5px">Conta：</label>
        <input type="text" id="username" name="username" required>
        <label for="password" style="margin-top: 5px">senha：</label>
        <input type="password" id="password" name="password" required>
        <button type="submit" onclick="login(event)">login</button>
    </form>
    <div class="form-switch">
        <label for="switch" id="switchLabel">Inscreva-se para uma nova conta</label>
        <input type="checkbox" id="switch" name="switch">
    </div>
    <form id="registerForm" class="form-group" style="display: none;">
        <label for="newUsername" style="margin-top: 5px">Nova conta：</label>
        <input type="text" id="newUsername" name="newUsername" required>
        <label for="newPassword" style="margin-top: 5px">Novas senhas：</label>
        <input type="password" id="newPassword" name="newPassword" required>
        <button type="submit" onclick="register(event)">inscrever</button>
        <button type="button" id="backToLogin">retornar</button>
    </form>
</div>
<script src="./js/swal.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        isLogin();
    });
    var switchCheckbox = document.getElementById("switch");
    var loginForm = document.getElementById("loginForm");
    var registerForm = document.getElementById("registerForm");
    var switchLabel = document.getElementById("switchLabel");
    var backToLoginButton = document.getElementById("backToLogin");

    switchCheckbox.addEventListener("change", function() {
        if (this.checked) {
            loginForm.style.display = "none";
            registerForm.style.display = "block";
            switchLabel.style.display = "none";
        } else {
            loginForm.style.display = "block";
            registerForm.style.display = "none";
            switchLabel.style.display = "inline";
        }
    });

    backToLoginButton.addEventListener("click", function() {
        loginForm.style.display = "block";
        registerForm.style.display = "none";
        switchLabel.style.display = "inline";
        switchCheckbox.checked = false;
    });

    function handleResponse(response) {
        if (response.success) {
            // 操作成功
            // 使用 SweetAlert 来创建弹窗
            Swal.fire({
                title: 'Operação Sucesso',
                text: 'Login Bem Sucedido!',
                icon: 'success',
                confirmButtonText: 'OK'
            }).then((result) => {
                // result.value 是用户点击确认按钮后的返回值
                if (result.value) {
                    // 在这里执行跳转逻辑
                    window.location.href="index.html"
                }
            });
            // alert("Operação Sucesso: Login Bem Sucedido!");
            // 这里可以根据具体情况进行其他操作，例如跳转页面等
            var token = response.resultObj.token;
            var username = response.resultObj.user.username;
            var expirationTime = new Date().getTime() + (1 * 60 * 60 * 1000);

            console.log(token)
            console.log(username)
            console.log(expirationTime)

            localStorage.setItem('token', token);
            localStorage.setItem('username', username);
            localStorage.setItem('expirationTime', expirationTime);
        } else {
            // 操作失败
            Swal.fire({
                title: 'Falha no login!',
                text: 'O número da conta ou senha está incorreto！',
                icon: 'error',
                confirmButtonText: 'OK'
            });
            // alert("Falha na operação: Falha no login!");
        }
    }

    function isTokenExpired() {
        var expirationTime = localStorage.getItem('expirationTime');

        if (expirationTime && new Date().getTime() > parseInt(expirationTime)) {
            // Token is expired, remove it
            localStorage.removeItem('token');
            localStorage.removeItem('expirationTime');
            return false;
        }

        return true;
    }

    function isLogin() {
        var expirationTime = localStorage.getItem('expirationTime');

        if (expirationTime && new Date().getTime() > parseInt(expirationTime)) {
            // Token is expired, remove it
            window.location.href="main.html";
        }
    }

    function login() {
        event.preventDefault();
        if (!isTokenExpired()) {
            Swal.fire({
                title: 'rápido',
                text: 'Você já está logado, por favor, não faça login repetidamente!',
                icon: 'warning',
                confirmButtonText: 'OK',
            }).then(() => {
                // SweetAlert 弹窗关闭后执行的操作
                loginForm.style.display = "none";
            });
            // alert("Você já está logado, por favor, não faça login repetidamente."); // or redirect to the authenticated page
            return;
        }
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;

        if (username === "" && password === ""){
            Swal.fire({
                title: 'Falha no pouso',
                text: 'O número da conta ou senha não pode estar vazio!',
                icon: 'error',
                confirmButtonText: 'OK'
            })
            return;
        }

        // 构建请求数据
        var loginDto = {
            username: username,
            password: password
        };

        // 发送登录请求
        fetch("http://software.free.idcfengye.com/loginUser/login", {
            method: "PUT",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(loginDto)
        })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                // 处理登录成功或失败的逻辑
                handleResponse(data);
            })
            .catch(error => {
                console.error("Login Error:", error);
                Swal.fire({
                    title: 'rápido',
                    text: 'Falha no login, tente novamente mais tarde!',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                // alert("Falha no login, tente novamente mais tarde.");
            });
    }

    function register() {
        event.preventDefault();
        var newUsername = document.getElementById("newUsername").value;
        var newPassword = document.getElementById("newPassword").value;

        if (newUsername === "" && newPassword === ""){
            Swal.fire({
                title: 'Falha no registro',
                text: 'O número da conta ou senha não pode estar vazio!',
                icon: 'error',
                confirmButtonText: 'OK'
            })
            return;
        }

        // 构建请求数据
        var registerDto = {
            username: newUsername,
            password: newPassword
        };

        // 发送注册请求
        fetch("http://software.free.idcfengye.com/loginUser/register", {
            method: "PUT",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(registerDto)
        })
            .then(response => response.json())
            .then(data => {
                console.log(data.code);
                console.log(data.success);
                // 处理注册成功或失败的逻辑
                if (data.code == 200 && data.success == true){
                    Swal.fire({
                        title: 'A operação foi bem-sucedida',
                        text: 'O registro foi bem-sucedido!',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        // result.value 是用户点击确认按钮后的返回值
                        if (result.value) {
                            // 在这里执行跳转逻辑
                            window.location.href="main.html";
                        }
                    });
                    // alert("A operação foi bem-sucedida：O registro foi bem-sucedido!");

                }else {
                    Swal.fire({
                        title: 'Falha no registro',
                        text: 'O usuário já existe, por favor, registre-se novamente!',
                        icon: 'warning',
                        confirmButtonText: 'OK'
                    });
                    // alert("Falha no registro：O usuário já existe, por favor, registre-se novamente!");
                }
            })
            .catch(error => {
                console.error("Register Error:", error);
                Swal.fire({
                    title: 'rápido',
                    text: 'Falha no registro, tente novamente mais tarde!',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                // alert("Falha no registro, tente novamente mais tarde.");
            });
    }

</script>
</body>
</html>
